<template>
    <div class="container">
        <!-- 表格 -->
        <div class="middle">
            <el-table ref="multipleTable" :data="tableData" stripe tooltip-effect="dark" style="width: 100%">
                <el-table-column label="检查项名称" prop="depName"></el-table-column>
                <el-table-column label="检查项类别" prop="depType"></el-table-column>
                <el-table-column label="类型" prop="type"></el-table-column>
                <el-table-column label="脚本" prop="script"></el-table-column>
                <el-table-column label="状态" prop="state">
                    <template slot-scope="scope">
                        <span>{{ getState(scope.row.state) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="描述" prop="note"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="check(scope.row.id)" size="small" plain>查看</el-button>
                        <el-button type="success" @click="publish(scope.row.id)" size="small" plain>审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 查看dialog -->
        <el-dialog title="合规检查项"
                :visible.sync="checkFormVisible"
                :close-on-click-modal="false">
            <el-form ref="checkFormRef" :model="checkForm" label-width="100px">
                <el-form-item label="检查项名称：" prop="depName">
                    <el-input v-model="checkForm.depName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="检查项类型：" prop="depType">
                    <el-input v-model="checkForm.depType" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="类型：" prop="type">
                    <el-input v-model="checkForm.type" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="脚本：" prop="script">
                    <el-input v-model="checkForm.script" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="描述：" prop="note">
                    <el-input v-model="checkForm.note" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" >
                <el-button @click="checkFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>  window._interceptConfig = {
  collection: true, //整体开关
  click: true, //页面点击事件信息采集开关
  page: true, //页面跳转加载事件信息采集开关
  error: true, //异常信息采集开关
  http: true, //通讯信息采集开关
  name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
  url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
};
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
    import { queryCheckDep, checkCheckDep } from "@/api/system/devops"
    export default {
        name: 'Comscript',
        data() {
            return {
                // 表格数据
                tableData: null,
                // 查询参数
                queryForm: {
                    moduleName: ""
                },
                // 修改dialog显示与否
                checkFormVisible: false,
                checkForm: {
                    id: "",
                    depName: "",
                    depType: "",
                    type: "",
                    script: "",
                    state: "",
                    note: "",
                    isdelete: "",
                },
            }
        },
        methods: {
            // 加载数据
            initData() {
                queryCheckDep("",this.queryForm.moduleName,"1").then(response => {
                    this.tableData = response.data
                })
            },
            // 查看
            check(id) {
                this.checkFormVisible = true
                queryCheckDep(id,"","1").then(response => {
                    this.checkForm = response.data[0]
                })
            },
            // 审核
            publish(id) {
                this.$confirm('确定要审核通过此数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    checkCheckDep(id).then(response => {
                        this.$message({
                            type: 'success',
                            message: '审核成功'
                        })
                        // 回显
                        this.initData()
                    })
                })
            },
            // 返回状态
            getState(state) {
                if (state === '0') {
                    return '未审核'
                } else {
                    return '已审核'
                }
            }
        },
        mounted() {
            this.initData()
        },
        watch:{
            //侦听queryForm
            queryForm:{
                deep: true,
                handler(newValue,oldValue){
                    this.initData()
                }
            }
        }
    }

</script>

<style>
    .msg {
        font-size: 16px;
        font-weight: bold;
        color: black;
        margin: 20px 0;
    }
    .btns {
        display: flex;
        flex-direction: row;
    }
    .middle {
        margin: 10px;
        width: 100%;
    }
</style>
